{#{% load static %}#}
{% extends 'base/header.html' %}
{{% block title %}
    首页
{% endblock %}}

{% block body %}
    <h2>全部</h2>
    <div class="row row-cols-2 row-gap-3">

        {% for blog in blogs %}
            <div class="col">
                <div class="card text-center">
                    <div class="card-header">
                        <a href="blog/info/{{ blog.id }}">{{blog.title}}</a>
                    </div>
                    <div class="card-body">
                        {#                    <h5 class="card-title">Special title treatment</h5>#}
                        <p class="card-text">{{  blog.content | safe }}</p>
                        {#                    <a href="#" class="btn btn-primary">Go somewhere</a>#}
                    </div>
                    <div class="card-footer text-muted d-flex justify-content-between">
                        <div>
                            <img src="{%static 'bootstrap/images/img.png'%}" width="50px" height="50px"
                                 class="rounded-5" alt="我是一个图片">
                            李三
                        </div>
                        <div class="text-center">{{blog.date_time|date:"Y-m-d H:i:s"}}</div>
                    </div>
                </div>
            </div>
        {% endfor %}


{#        <div class="col">#}
{#            <div class="card text-center">#}
{#                <div class="card-header">#}
{#                    Featured#}
{#                </div>#}
{#                <div class="card-body">#}
{#                    <h5 class="card-title">Special title treatment</h5>#}
{#                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>#}
{#                    <a href="#" class="btn btn-primary">Go somewhere</a>#}
{#                </div>#}
{#                <div class="card-footer text-muted">#}
{#                    2 days ago#}
{#                </div>#}
{#            </div>#}
{#        </div>#}


{#        <div class="col">#}
{#            <div class="card text-center">#}
{#                <div class="card-header">#}
{#                    Featured#}
{#                </div>#}
{#                <div class="card-body">#}
{#                    <h5 class="card-title">Special title treatment</h5>#}
{#                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>#}
{#                    <a href="#" class="btn btn-primary">Go somewhere</a>#}
{#                </div>#}
{#                <div class="card-footer text-muted">#}
{#                    2 days ago#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="col">#}
{#            <div class="card text-center">#}
{#                <div class="card-header">#}
{#                    Featured#}
{#                </div>#}
{#                <div class="card-body">#}
{#                    <h5 class="card-title">Special title treatment</h5>#}
{#                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>#}
{#                    <a href="#" class="btn btn-primary">Go somewhere</a>#}
{#                </div>#}
{#                <div class="card-footer text-muted">#}
{#                    2 days ago#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
    </div>
{% endblock %}
